<template>
	<view id="content">
		<image src="https://z3.ax1x.com/2021/09/02/hD6GsU.png" class="bgi"></image>
		<view class="info" >
			<!-- 信息 -->
			<view class="info-left">
				<!-- 头像 -->
				<view class="img" style="position: relative;">
					<image :src="info.headimgurl" class="img" ></image>
					<image :src="cur_level" style="position: absolute;bottom:-15rpx;right: -15rpx;width: 60rpx;height: 60rpx;"></image>
					<!-- cur_level  计算属性 -->
				</view>
				<!-- 个人信息 -->	
				<view class="info-left-content">
					<!-- 昵称 -->
					<view class="name">
						<text class="name-nc">{{info.nickname}}</text>
						<!-- 性别 -->
						<image src="../../static/mine/nv.png" class="ico" v-if="info.sex === 2"></image>
						<image src="../../static/mine/nan.png" class="ico" v-if="info.sex === 1"></image>
					</view>
					<!-- 电话、积分 -->
					<view class="integral">
						<text class="love-dian-num">爱电：{{info.i_film}}</text>
						<!-- <text>189****9250</text> -->
					</view>
				</view>
			</view>
			<!-- 认证 -->
			<view class="info-right">
				<image src="../../static/mine/yrz.png" class="icon"></image>
				<navigator url="./sub/certification">
					<view class="txt">{{info.sgs==0?'未认证':'已认证'}}</view>
				</navigator>
			</view>
		</view>
		<!-- 爱心圈盒子 -->
		<view class="love-box">
			<navigator url="./sub/love-circle">
				<view class="love-circle" >
					<image src="../../static/mine/axq.png" class="icon"></image>
					<view>爱心圈</view>
				</view>
			</navigator>
			<!-- <view style="width: 1rpx; height: 59rpx; background: #D8D8D8;"></view> -->
			<view class="Sign-in" @click="everyday_signin">
				<image src="https://z3.ax1x.com/2021/09/02/hri3Lt.png" class="img"></image>
				<uni-popup ref="popup" type="center" :mask-click="false">
					<view class="tankuang">
						<image src="https://z3.ax1x.com/2021/09/02/hrP5a8.png" class="ico"></image>
						<image src="../../static/mine/gxn.png" class="icon"></image>
						<view class="txt">已连续签到{{day}}天</view>
						<view class="gongxi">恭喜获得 <text class="num">5</text> 个爱电的奖励</view>
						<!-- <view class="jifen">积分已发放到钱包</view> -->
						<view class="qiandao">助力寻人，爱电增长更快哦~</view>
						<view class="close" @click="close">×</view>
					</view>
				</uni-popup>
				<view style="font-size: 28rpx;">签到</view>
			</view>
			<!-- <view style="width: 1rpx; height: 59rpx; background: #D8D8D8;"></view> -->
			<navigator url="./sub/card">
				<view class="love-card">
					<image src="../../static/mine/axk.png" class="icon"></image>
					<view>爱心卡</view>
				</view>
			</navigator>
		</view>
		<!-- 关注转发 -->
		<view class="zhuanfa">
			<!-- 我的关注 -->
			<!-- <navigator url="./sub/follow">
				<view>
					<image class="icon" src="../../static/mine/wdgz.png" mode=""></image>
					<view>我的关注</view>
				</view>
			</navigator> -->
			<!-- 我的转发 -->
			<navigator url="./sub/my-share">
				<view>
					<image class="icon" src="../../static/mine/wdzf.png" mode=""></image>
					<view>我的转发</view>
				</view>
			</navigator>
			<!-- 我的寻人 -->
			<navigator url="../make/make_list">
				<view>
					<image class="icon" src="../../static/mine/wdxr.png" mode=""></image>
					<view>我的寻人</view>
				</view>
			</navigator>
			<!-- 我的寻人 -->
		</view>
		<!-- 领取积分 -->
		<view class="get-integral">
			<image src="https://z3.ax1x.com/2021/09/02/hriUJg.png" class="img"></image>
			<navigator url="./sub/get-love-electric">
				<image src="../../static/mine/lqan_3.gif" class="btn"></image>
			</navigator>
		</view>
		<!-- 常用工具 -->
		<view class="tools">
			<view class="title">常用工具</view>
			<view class="tools-item">
				<navigator url="./sub/message">
					<view class="tools-ico">
						<image class="icon" src="../../static/mine/xxzx.png" mode=""></image>
						<view class="txt">系统消息</view>
					</view>
				</navigator>
				<navigator url="./sub/feedback">
					<view class="tools-ico">
						<image class="icon" src="../../static/mine/yjfk.png" mode=""></image>
						<view class="txt">意见反馈</view>
					</view>
				</navigator>
				<navigator url="./sub/online-interaction">
					<view class="tools-ico">
						<image class="icon" src="../../static/mine/zxkf.png" mode=""></image>
						<view class="txt">微信客服</view>
					</view>
				</navigator>
				<navigator url="./sub/help">
					<view class="tools-ico">
						<image class="icon" src="../../static/mine/bz.png" mode=""></image>
						<view class="txt">帮助</view>
					</view>
				</navigator>
				<navigator url="./sub/it">
					<view class="tools-ico">
						<image class="icon" src="../../static/mine/hd.png" mode=""></image>
						<view class="txt">评论</view>
					</view>
				</navigator>
				
				<view v-if="info.manage==1">
					<!-- 客服人员才有这个界面 -->
					<navigator url="./sub/check-catalogue" >
						<view class="tools-ico">
							<image class="icon" src="../../static/mine/sh.png" mode=""></image>
							<view class="txt">审核</view>
						</view>
					</navigator>
				</view>
				<navigator url="./sub/set">
					<view class="tools-ico">
						<image class="icon" src="../../static/mine/sz.png" mode=""></image>
						<view class="txt">设置</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					i_film: ''
				},
				sign_data:'',
				day:0,
				cur_level:''
			};
		},
		async onLoad() {
			// let url = window.location.href;
			// await this.$u.utils.login_check(url)
			this.get_user_social_info()
		},
		methods: {
			// 每日签到
			everyday_signin(){
				let self=this
				this.$u.api.everyday_signin().then(
				res=>{
					if(res.code==200){
						self.day = res.data.ext;
						self.$refs.popup.open('center')
						this.get_user_social_info();
					}else{
						uni.showToast({
							title:'今天已经签到过了^.^',
							icon:'none'
						})
					}
				})
			},
			// 获取会员信息
			async get_user_social_info() {
				let res = await this.$u.api.get_user_social_info();
				this.$u.vuex('vuex_user_info', res.data)
				if(res.code==200){
					this.info = res.data;
					this.$set(this.info, 'i_film', res.data.i_film)
					this.clc_level()
				}
			},
			// 计算用户等级
			clc_level(){
				let level=this.info.grade
				switch(level){
					case 0:
					this.cur_level='../../static/rank/lv1.png'
					break
					case 1:
					this.cur_level='../../static/rank/lv2.png'
					break
					case 2:
					this.cur_level='../../static/rank/lv3.png'
					break
					case 3:
					this.cur_level='../../static/rank/lv4.png'
					break
					case 4:
					this.cur_level='../../static/rank/lv5.png'
					break
					case 5:
					this.cur_level='../../static/rank/lv6.png'
					break
				}
			},
			// 关闭
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	#content {
		.bgi {
			width: 100%;
			height: 325rpx;
		}

		.info {
			width: 690rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 50rpx;
			left: 50%;
			transform: translateX(-50%);

			.info-left {
				display: flex;
				align-items: center;

				.img {
					width: 120rpx;
					height: 120rpx;
					// margin-right: 32rpx;
					border-radius: 20rpx;
				}

				.info-left-content {
					margin-left: 20rpx;
					.name {
						margin-bottom: 18rpx;

						.name-nc {
							font-size: 18px;
							color: #fff;
							margin-right: 11rpx;
						}

						.ico {
							width: 26rpx;
							height: 26rpx;
						}
					}

					.integral {
						display: flex;
						color: #fff;
						align-items: center;

						.love-dian-num {
							margin-right: 37rpx;
							background-color: #F16B3A;
							width: 140rpx;
							height: 32rpx;
							line-height: 32rpx;
							border-radius: 8rpx;
							text-align: center;
							font-size: 18rpx;
						}
					}
				}
			}

			.info-right {
				position: relative;
				width: auto;
				.icon {
					width: 115rpx;
					height: 38rpx;
				}
				.txt {
					position: absolute;
					top: 2rpx;
					right: 6px;
					color: #FF9900;
					font-size: 22rpx;
				}
			}
		}

		.love-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;
			width: 690rpx;
			height: 165rpx;
			box-shadow: 0rpx 9rpx 11rpx 1rpx rgba(70, 215, 220, 0.12);
			border-radius: 10rpx;
			font-size: 12px;
			color: #666;
			margin: 0 auto;
			position: relative;
			top: -130rpx;

			.icon {
				width: 82rpx;
				height: 82rpx;
			}

			.love-circle {
				display: flex;
				flex: 1;
				flex-direction: column;
				align-items: center;
			}

			.Sign-in {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				top: -25rpx;

				.tankuang {
					width: 600rpx;
					background-color: #fff;
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 20rpx;

					.ico {
						width: 350rpx;
						height: 270rpx;
						position: absolute;
						top: -180rpx;
					}

					.icon {
						width: 140rpx;
						height: 50rpx;
						margin-top: 80rpx;
					}

					.txt {
						color: #aaa;
						margin-bottom: 20rpx;
					}

					.gongxi {
						margin-bottom: 50rpx;

						.num {
							color: #FA3534;
							padding: 0 5rpx;
							font-size: 20px;
							font-weight: 700;
						}
					}

					// .jifen {
					// 	color: #aaa;
					// 	padding-bottom: 20rpx;
					// }
					.qiandao {
						background-color: #ffa200;
						color: #fff;
						font-size: 16px;
						width: 600rpx;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;
					}

					.close {
						position: absolute;
						bottom: -100rpx;
						width: 60rpx;
						height: 60rpx;
						font-size: 40rpx;
						border: 1rpx solid #aaa;
						border-radius: 50%;
						text-align: center;
					}
				}


				.img {
					width: 193rpx;
					height: 140rpx;
				}
			}

			.love-card {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.zhuanfa {
			width: 690rpx;
			height: 165rpx;
			color: #666;
			background-color: #fff;
			box-shadow: 0rpx 9rpx 11rpx 1rpx rgba(70, 215, 220, 0.12);
			border-radius: 10rpx;
			font-size: 24rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			position: relative;
			top: -118rpx;

			.icon {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
			}
		}

		.get-integral {
			position: relative;
			top: -77rpx;
			width: 663rpx;
			height: 100rpx;
			margin: 0 auto;

			.img {
				width: 663rpx;
				height: 100rpx;
			}

			.btn {
				width: 182rpx;
				height: 55rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.tools {
			width: 690rpx;
			border-top: 1rpx solid #e8e8e8;
			margin: 0 auto;
			position: relative;
			top: -53rpx;

			.title {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
				margin-top: 25rpx;
			}

			.tools-item {
				color: #666;
				font-size: 24rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				.tools-ico {
					text-align: center;
					width: 120rpx;
					margin: 30rpx 25rpx;

					.icon {
						width: 50rpx;
						height: 50rpx;
						margin-bottom: 18rpx;
					}

					.txt {}
				}
			}
		}
	}
</style>
